<template>
	<view>
		<u-popup v-model="popupShow" mode="bottom" length="90%" closeable @close="close">
			<view class="title"><text class="u-font-36">搜索并选择用户</text></view>
			<view class="u-p-30 u-m-t-2">
				<u-search class="u-flex-1" placeholder="请输入用户手机号或名称" shape="square" :show-action="false" v-model="keyword" @blur="searchBlur" @change="searchKey"></u-search>
			</view>
			<view class="search-list">
				<view class="u-flex u-justify-content u-p-20" v-if="loading">
					<u-loading mode="flower"></u-loading><text class="u-tips-color u-m-l-10">搜索中...</text>
				</view>
				<view v-if="searchList.length > 0">
					<view class="u-m-l-30 u-m-t-10 u-m-b-10"><text class="u-tips-color u-font-24">共{{searchList.length}}条搜索结果</text></view>
					<u-cell-group>
						<u-cell-item 
							v-for="(item,index) in searchList"
							:key="index"
							:title="item.name" :value="item.mobile"
							 @click="chooseCustomer(item)">
						</u-cell-item>
					</u-cell-group>
				</view>
				<!-- <view class="u-p-60" v-if="!loading && searchList.length == 0">
					<view v-if="isNotReg">
						<u-empty text="没有检索出此用户" mode="search"></u-empty>
						<view class="u-text-center u-p-b-30">
							<text class="u-tips-color">是否以 {{keyword}} 号码创建新用户下单？</text>
						</view>
						<u-button type="primary" @click="registerAccount(keyword)">立即创建</u-button>
					</view>
					<u-empty v-else text="没有搜索结果" mode="search"></u-empty>
				</view> -->
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props:{
			show:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				popupShow: false,
				loading: false,
				keyword: '',
				isNotReg: false,
				// 搜索结果
				searchList: [],
			};
		},
		watch: {
			show(val) {
				this.popupShow = val;
			}
		},
		mounted() {
			this.popupShow = this.show;
			this.searchKey()
		},
		methods:{
			// 关键词搜索客户
			searchKey(key){
				this.loading = true
				this.isNotReg = false
				return this.$u.post('/User/List',{
					pageIndex: 1,
					pageSize: 20,
					key: key,
					isALL: true
				}).then((res)=>{
					this.searchList = res.rows
					if(this.searchList.length == 0){
						if(this.$u.test.mobile(key)){
							this.isNotReg = true
						}
					}
					this.loading = false
					
					return res.rows
				}).catch(()=>{
					this.loading = false
				})
			},
			//选择客户
			chooseCustomer(item){
				console.log('选择客户',item)
				// 应该在这里发出事件，让父组件知道选择了哪个客户
				this.$emit('confirm', item);
				// 关闭弹窗
				this.popupShow = false;
				this.$emit('close');
			},
			// 聚焦
			searchBlur(){
				setTimeout(()=>{
					this.information = false
				},100)
			},
			close(){
				this.popupShow = false;
				this.$emit('close');
			}
		}
	}
</script>

<style lang="scss">
	.title{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 30rpx;
	}
</style>